<template>
  <el-container>
    <el-header>
      <el-form :inline="true" style="margin-top: 20px">
        <el-form-item label="关键字">
          <el-input v-model="keyword" placeholder="关键字" clearable @clear="clearConditions"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" v-on:click="searchData"></el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%;" highlight-current-row @row-dblclick="rowDbClick">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-card>
              <div slot="header">
                <span>命令</span>
              </div>
              <el-container>
                <el-header><p>{{scope.row.content.text}}</p></el-header>
                <el-main>
                  <el-table border max-height="400" :data="scope.row.content.parameters" style="width: 100%;" >
                    <el-table-column prop="name" label="名称" width="100"></el-table-column>
                    <el-table-column prop="parameterName" label="参数名" width="100" ></el-table-column>
                    <el-table-column label="类型" width="150">
                      <template slot-scope="scope">{{getType(scope.row.type)}}</template>
                    </el-table-column>
                    <el-table-column label="传参方式" width="100">
                      <template slot-scope="scope">{{getDirection(scope.row.direction)}}</template>
                    </el-table-column>
                    <el-table-column prop="precision" header-align="center" align="right" label="精度" width="80"></el-table-column>
                    <el-table-column prop="scale" header-align="center" align="right" label="小数位" width="80" ></el-table-column>
                    <el-table-column prop="size" header-align="center" align="right" label="范围" width="80" ></el-table-column>
                    <el-table-column prop="defaultValue" label="默认值" width="100" ></el-table-column>
                    <el-table-column prop="description" label="参数描述" min-width="200"></el-table-column>
                  </el-table>
                </el-main>
              </el-container>
            </el-card>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称"  min-width="150"></el-table-column>
        <el-table-column label="数据库连接" width="150">
          <template slot-scope="scope">
            {{ scope.row.content.connectionName }}
          </template>
        </el-table-column>
        <el-table-column label="命令类型" width="150">
          <template slot-scope="scope">{{getCommandType(scope.row.content.commandType)}}</template>
        </el-table-column>
        <el-table-column header-align="right" align="right" label="超时时间(ms)" width="100">
          <template slot-scope="scope">
            {{ scope.row.content.timeout }}
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" header-align="center" align="center" width="200" ></el-table-column>
        <el-table-column fixed="right" header-align="left" align="left" width="160">
          <template slot="header">
            <el-button type="text" icon="el-icon-plus" @click="add"></el-button>
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新"></el-button>
            <el-button type="text" icon="el-icon-sort" @click="syncLastVersions" title="同步"></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-download" @click="pull(scope.row)" title="获取最新版本"></el-button>
            <el-button type="text" icon="el-icon-time" @click="viewVersions(scope.row)" title="查看历史版本"></el-button>
            <el-button type="text" icon="el-icon-remove" @click="remove(scope.row)" title="删除"></el-button>
            <template v-if="scope.row.submitted">
              <el-button type="text" icon="el-icon-document-checked" @click="checkout(scope.row)" title="签出以编辑"></el-button>
            </template>
            <template v-else>
              <el-button type="text" icon="el-icon-edit" @click="item(scope.row)" title="编辑"></el-button>
              <el-button type="text" icon="el-icon-finished" @click="commit(scope.row)" title="提交到版本库"></el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer :title="'[' + (currentItem ? currentItem.name:'') + ']所有版本'" :visible.sync="showVersioning" @closed="versionClosed" direction="rtl" size="40%" >
        <mf-versioning :workItem="currentItem"></mf-versioning>
      </el-drawer>
      <el-dialog title="新建SQL命令" :visible.sync="showCreate" width="400px">
        <div class="container-fluid">
          <el-input v-model="newName" placeholder="请填写新命令名称" autocomplete="off"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showCreate = false">取 消</el-button>
          <el-button type="primary" @click="create">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
    <!--底部分页-->
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount">
      </el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import { mapGetters, mapState, mapActions } from 'vuex';
const STORE_MODULE = {
  "getters": [
    "commandTypes",
    "types",
    "parameterDirections"
  ],
  "name": "workSpace",
  "state": [
    "queryObject",
    "dataTable"
  ],
  "actions": [
    "query",
    "delete"
  ]
};
export default {
  data() {
    return {
      newName: "",
      showVersioning: false,
      showCreate: false,
      currentItem: {},
      keyword: null
    };
  },
  computed: {
    ...mapGetters(STORE_MODULE.getters),
    ...mapState(STORE_MODULE.name, STORE_MODULE.state)
  },
  created() {
    this.query();
  },
  methods: {
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    getCommandType(val) {
      let item = this.commandTypes.singleOrDefault(
        p => p.value == val
      );
      return item ? item.label : "";
    },
    getType(val) {
      let item = this.types.singleOrDefault(
        p => p.value == val
      );
      return item ? item.label : "";
    },
    getDirection(val) {
      let item = this.parameterDirections.singleOrDefault(
        p => p.value == val
      );
      return item ? item.label : "";
    },
    searchData() {
      this.queryObject.parameters.keyword = this.keyword;
      this.query();
    },
    clearConditions() {
      if (this.queryObject.parameters.keyword != this.keyword) this.searchData();
    },
    rowDbClick(row, column, event) {
      this.item(row);
    },
    item(row) {
      if (!row.submitted)
        this.$router.push({
          name: "commandItem",
          params: { name: row.name }
        });
    },
    remove(row) {
      if (row.submitted) {
        alert("不能删除已签入的命令", "警告", "warning");
      } else {
        confirm(
          "确认要删除" + row.name + "吗？删除之后将不可恢复，请谨慎操作！",
          "警告",
          "warning",
          () => {
            this.delete(row.name).then(r => {
              if (r.success) alert("删除成功", "消息", "success");
            }).catch(error => {
              alert(error, "错误", "error");
            });
          }
        );
      }
    },
    add() {
      this.showCreate = true;
    },
    create(){
      if (this.newName){
        this.showCreate = false;
        this.$router.push({
          name: "commandItem",
          params: { name: this.newName },
        });
        this.newName = null;
      }
      else{
        alert('请先填写命令名','提示','info');
      }
    },
    commit(row) {
      prompt("请填写备注", "提交代码", "", val => {
        this.$service.version
          .commit({ data: { name: row.name, comment: val } })
          .then(response => {
            if (response.success) {
              row.submitted = true;
              alert("提交成功", "消息", "success");
            }
          });
      });
    },
    checkout(row) {
      this.$service.version
        .checkout({ params:{ name : row.name} })
        .then(response => {
          if (response.success) {
            row.submitted = false;
          }
        });
    },
    syncLastVersions() {
      this.$service.version.syncLastVersions().then(response => {
        if (response.success) {
          alert("已成功同步所有命令的最新版本");
          this.query();
        }
      });
    },
    pull(row) {
      this.$service.version
        .pull({ params: { name: row.name } })
        .then(response => {
          if (response.success) {
            alert("已成功下载命令[" + row.name + "]的最新版本");
            this.query();
          }
        });
    },
    viewVersions(row) {
      this.currentItem = row;
      this.showVersioning = true;
    },
    versionClosed() {
      this.currentItem = {};
      this.showVersioning = false;
    }
  }
};
</script>
